<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/search-form.css">
    <link rel="stylesheet" type="text/css" href="css/bookdetails.css">
    <link rel="stylesheet" type="text/css" href="css/footer.css">
</head>
<body>
	<div id="top" ku_ver="1.0.0">
			<input type="hidden" id="REQ_ID" name="reqId" value="" />
			<input type="hidden" id="PROFILE_ID" name="profileId" value="site"/>
			<div class="top">
				<a class="logo" href="http://www.kuwo.cn/">
					
				</a>
				<ul class="nav">
					<li>
						<a href="Home.html">首页</a>
					</li>
					<li>
						<a href="">小说分类</a>
					</li>
					<li>
						<a></a>
					</li>
					<li>
						<a target="_blank" href="##">下载看见客户端</a>
					</li>
					<li>
						<a></a>
					</li>
					<li>
						<a></a>
					</li>
					<li>
						<a target="_blank" href="login.html">登录</a>
					</li>
					<li>
						<a target="_blank" href="registered.html">注册</a>
					</li>
					<li>
						<a href="personal center.html">个人中心</a>
					</li>
				</ul>
			</div>
		</div>


		<div id="header">
			<div class="logo">
				<img src="img/eye.png" />
			    <h1>看见乐读</h1>
			    <span>畅读更多你喜欢的书</span>
			    
			</div>
			<section class="container">
		<form onsubmit="submitFn(this, event);" >
            <div class="search-wrapper" style="margin-top: -170px;margin-left: 150px;">
                <div class="input-holder" >
                    <input type="text" class="search-input" placeholder="Type to search" />
                    <button class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
                </div>
                <span class="close" onclick="searchToggle(this, event);"></span>
                <div class="result-container">

                </div>
            </div>
        </form>
	</section>
		</div>


		<div class="more">
			<div class="that">
			<img src="img/chenghong.jpg">
			<p>《橙红年代》</p>
			</div>
			<div class="its">
				<ul class="aa">
					<li><img src="img/星星.png"></li>
					<li><img src="img/星星.png"></li>
					<li><img src="img/星星.png"></li>
					<li><img src="img/星星.png"></li>
					<li><img src="img/星星 (1).png"></li>
					<li><p>4.4分</p></li>
				</ul>
				<br/>
				<br/>
				<br/>
				<ul class="bb">
					<li>作者：骁骑校</li>
					<li>类型：社会</li>
					<li>字数：274万字</li>
				</ul>
				<br/>
				<br/>
				<ul class="bb">
					<li>出版：山东人民出版社</li>
					<li>人气：260473 </li>
				</ul>
				<br/>
				<div class="cc">
					陈伟霆、马思纯主演同名电视剧《橙红年代》现已杀青，2018年东方卫视和浙江卫
视联播。五千万读者热捧的草根奋斗史，堪称当代社会的百科全书式小说，道尽都
市丛林的残酷生存法则！八年前，他是畏罪逃亡的烤肠小贩。八年后，他是经历过
血与火考验的铮铮硬汉。家徒四壁，父母下岗，蜗居于棚户区之间，重头再来的刘
子光唯有从最底层的保安做起，靠着一腔热血与两只铁拳，奋战在这轰轰烈烈橙红
色的年代！这是一个颠覆的时代，英雄退隐，江湖已老。一句顶天立地，却轻易催
动我们蠢蠢欲动的热血。一句出人头地，便把梦想浇上汽油在阳光下点燃。枪林弹
雨，刀光剑影依然是我们不朽的英雄梦。
				</div>
				
				<div class="dd">
					<div><a href="">免费阅读</a></div>
					<div><a href="">加入书架</a></div>
					<div><a href="">推荐</a></div>
					<div><a href="">打赏</a></div>
				</div>
			</div>
		</div>

		<div class="directory">
			<h1>章节目录</h1>
			<div class="happy">
			    <ul class="else">
				    <li>1.第一章</li>
				    <li>3.第三章</li>
				    <li>5.第三章</li>
				    <li>7.第四章</li>
				    <li>9.第一章</li>
				    <li>11.第一章</li>
				    <li>13.第一章</li>
				    <li>15.第一章</li>
				    <li>17.第一章</li>
				    <li>19.第一章</li>
				    <li>21.第一章</li>
				    <li>23.第一章</li>
				    <li>25.第一章</li>
				    <li>27.第一章</li>
			    </ul>
			</div>
			<div class="unhappy">
				<ul>
					<li>2.第一章</li>
				    <li>4.第一章</li>
				    <li>6.第一章</li>
				    <li>8.第一章</li>
				    <li>10.第一章</li>
				    <li>12.第一章</li>
				    <li>14.第一章</li>
				    <li>16.第一章</li>
				    <li>18.第一章</li>
				    <li>20.第一章</li>
				    <li>22.第一章</li>
				    <li>24.第一章</li>
				    <li>26.第一章</li>
				    <li>28.第一章</li>
				</ul>
			</div>
		</div>

        <div class="nextpage">
        	<ul>
        		<li><img src="img/左翻页.png" /></li>
        		<li><a class="alink">1</a></li>
        		<li><a>2</a></li>
        		<li><a>3</a></li>
        		<li><a>4</a></li>
        		<li><a>5</a></li>
        		<li><a>6</a></li>
        		<li><a>7</a></li>
        		<li><a>8</a></li>
        		<li><img src="img/右翻页.png" /></li>
        	</ul>
        </div>



<div id="footer" style="margin-top: 700px;">
    	<div class="footer">
        		<p>全力做好网上治安秩序打击整治专项行动，打造晴朗网络空间</p>
        		<p class="f_link">
        			<a target="_blank" href="http://www.kuwo.cn/static/file/sitemap/sitemap.html">网站地图</a>
        			"|
        			<a target="_blank" href="http://yinyue.kuwo.cn/yy/s2/contact.jsp">联系我们</a>
        			"|
        			<a target="_blank" href="http://yinyue.kuwo.cn/yy/s2/fuwu.html">广告服务</a> |
                    <a target="_blank" href="http://yinyue.kuwo.cn/yy/s2/introduction.jsp">诚聘英才</a> |
                    <a target="_blank" href="http://www.kuwo.cn/static/page/license/license.html">用户服务协议</a> |
                    <a target="_blank" href="http://www.kuwo.cn/static/page/license/license_privacy.html">隐私政策</a> |
                    <a target="_blank" href="http://yinyue.kuwo.cn/yy/s2/NoBlameDoc.jsp">酷我音乐网站免责声明</a> |
                    <a target="_blank" href="http://yinyue.kuwo.cn/yy/s2/ProtectDoc.jsp">酷我音乐权利声明</a> |
                    <a target="_blank" href="http://yinyue.kuwo.cn/yy/s2/jianhu1.jsp">未成年人家长监护工程</a>

        		</p>
        		
        		<p>举报电话：010-80121810 举报邮箱：support@kuwo.cn</p>
        	</div>
    </div>

</body>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script type="text/javascript">
        function searchToggle(obj, evt){
            var container = $(obj).closest('.search-wrapper');

            if(!container.hasClass('active')){
                  container.addClass('active');
                  evt.preventDefault();
            }
            else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
                  container.removeClass('active');
                  // clear input
                  container.find('.search-input').val('');
                  // clear and hide result container when we press close
                  container.find('.result-container').fadeOut(100, function(){$(this).empty();});
            }
        }

        function submitFn(obj, evt){
            value = $(obj).find('.search-input').val().trim();

            _html = "Yup yup! Your search text sounds like this: ";
            if(!value.length){
                _html = "Yup yup! Add some text friend :D";
            }
            else{
                _html += "<b>" + value + "</b>";
            }

            $(obj).find('.result-container').html('<span>' + _html + '</span>');
            $(obj).find('.result-container').fadeIn(100);

            evt.preventDefault();
        }
    </script>

</html>